<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
</head>
<body>
  <div id="app">
    <p>原数据:{{num}}</p>
    <button @click="num++">num++</button>
    <p>使用自定义指令放大后的数据:<span v-big="num"></span></p>
    <br><br>
    <hr>
    <h3>使用自定义指令模拟v-bind指令的效果并让其在页面加载之后立马获取焦点</h3>
    <input type="text" v-f-bind="num">
  </div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  //全局指令
  Vue.directive("big",function (element,binding){
      element.innerText=binding.value*10
  })
  const vm=new Vue({
    el:"#app",
    data(){
      return{
          num:10
      }
    },
    directives:{
      //简写，实现将数字放大10倍的效果
      big(element,binding) {
        element.innerText=binding.value*10
      },
      //第二个需求，实现v-bind的同时还需要让其在页面加载后立马获取焦点，这里需要使用自定义指令的完整写法
      fBind:{
        //在指令与模板元素绑定时
        bind(element,binding){
            element.value=binding.value //指令中的this指向是window
        },
        //在模板渲染到页面之后
        inserted(element,binding){
            element.focus()
      },
        //当模板发生更新时
        update(element,binding){
          element.value=binding.value
        }
      }
    }
  })
</script>
</body>
</html>
